@charset 'UTF-8';
@import "../fonts/iconfont.css";

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
}

.web {
	
	i:hover {
		cursor: pointer;
	}
	header {
		padding-bottom: 1.8vw;
		display: flex;
		// background-color: red;
		justify-content: center;
		align-items: center;
		padding-top: 1vw;
		
		
		.headerLeft {
			left: 2vw;
			position: fixed;
			z-index: 4;
			border-radius: 50%;
			
			position: fixed;
			// border: none;
			i {
				font-size: 3vw;
				color: #fff;
				// border: none;
			}
		}
		.headerLeft:hover {
			cursor: pointer;
		}
		.headerCenter {
			a {
				display: inline-block;
				width: 12vw;
				height: 8vw;
				overflow: hidden;
				img {
					width: 100%;
				}
			}
		}
		.headerRight {
			position: fixed;
			right: 2vw;
			z-index: 4;
			// transition: all .3s ease-in-out;
			border-radius: 50%;
			padding: 0.2vw;
			i {
				font-size: 2.8vw;
				color: #ffffff;
				// border: none;
			}
		}

		.mask1 {
			clip-path: circle(1.5vw at 3.5% 5.13vw);
			
			z-index: 3;
			width: 100%;
			height: 100%;
			position: fixed;
			
			top: 0;
			left: 0;
			
			padding-top: 3vw;
			background: linear-gradient(200deg, #AAAAAA, #00FFFF);
			transition: all 0.3s ease-in-out;
			// border: none;
			.box {
				
				width: 80vw;
				height: 40vw;
				padding-top: 3vw;
				margin: 0 auto;
				margin-top: 0vw;
				position: relative;
				// top: calc(50% - 21.5vw);
				// z-index: 99;
				.cancel {
					position: absolute;
					top: 3vw;
					left: 6.5vw;
					i {
						font-size: 2vw;
					}
					i:hover {
						cursor: pointer;
					}
				}
				.content {
					margin: 0 auto;
					.top {
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						width: 17vw;
						a {
							display: block;
							i {
								font-size: 2vw;
								color: #fff;
								border-radius: 50%;
								transition: all 0.3s ease;
								padding: 0.3vw;
							}
							i:hover {
								color: #d576ba;
								background-color: #fff;
							}
						}
					}
					.center {
						margin: 0 auto;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 60vw;
						height: 48vh;
						padding-top: 2vw;
						a {
							margin: 0 auto;

							text-align: center;

							font-size: 1.7vw;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0vw;
							color: #fff;
							padding-bottom: 2vh;
							padding-top: 1.9vh;
							padding-left: 1vw;
							padding-right: 1vw;
							transition: all 0.6s ease;
							border-radius: 5vw;
						}
						a:hover {
							color: #d576ba;
							background-color: #fff;
						}
					}
					.bottom {
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						width: 25vw;
						padding-top: 4vw;
						.line {
							height: 0;
							width: 2vw;
							border-bottom: 1px solid #fff;
							padding-top: 0.7vw;
						}
						a {
							// font-family: CenturyGothic;
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0vw;
							color: #fff;
							transition: all 0.6s ease;
							border-radius: 10vw;
							padding: 0vh 0.5vw;
						}
						a:hover {
							color: #d576ba;
							background-color: #fff;
						}
					}
				}
			}
		}
		.mask2 {
			width: 100%;
			height: 100%;
			position: fixed;

			z-index: 3;
			top: 0;
			left: 0;
			background: linear-gradient(200deg, #ec77ab, #7873f5);
			transition: all 0.3s ease-in-out;

			clip-path: circle(1.6vw at calc(100% - 3.6vw) 5.1vw);

			.box {
				width: 80vw;
				height: 43.5vw;
				margin-left: 20vw;
				position: relative;
				margin: 0 auto;
				margin-top: 0;

				.content {
					width: 60vw;
					margin: 0 auto;
					padding-top: 18vw;
					text-align: center;
					form {
						input {
							display: block;
							margin: 0 auto;
							width: 20vw;
							text-align: center;
							border: none;
							font-size: 3vw;
							border: none;
							border-radius: 10vw;
							// background-color: transparent;
							// color: gray;
							
						}
						
					}
					.serachBox {
						// font-family: CenturyGothic;
						font-size: 2vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #fff;
						margin-top: 6vw;
						display: inline-block;
						transition: all 0.3s ease;
					}
					.serachBox:hover {
						cursor: pointer;
						border-radius: 10vw;
						background-color: #fff;
						padding: 0.2vw 0.5vw;
						color: #d576ba;
					}
				}
			}
		}
	}

	footer {
		width: 100%;
		height: 5vw;
		background-color: rgba(0, 0, 0, 0.7);
		position: relative;
		// bottom: 0;
		margin-top: -5vw;
		// z-index: 3;

		.content {
			display: flex;
			justify-content: space-between;
			width: 60vw;
			padding-left: 18vw;
			padding-top: 1.6vw;

			h2 {
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0vw;
				color: #ffffff;
			}
			i {
				font-size: 2vw;
				color: #ffffff;
			}
			i:hover {
				cursor: pointer;
			}
		}
		.content1 {
			width: 70vw;
			display: flex;
			justify-content: space-between;
			padding-left: 18vw;
			padding-top: 4vw;
			.left {
				h2 {
					// font-family: CenturyGothic;
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0vw;
					color: #adb3b5;
					padding-bottom: 1vw;
				}
				form {
					font-size: 0;
					width: 35vw;
					display: flex;
					align-items: center;
					input {
						width: 22vw;
						background-color: transparent;
						border: none;
						border: 1px solid #666666;
						padding-top: 0.5vw;
						padding-bottom: 0.5vw;
						padding-left: 0.5vw;
					}
					input::-webkit-input-placeholder {
						color: #adb3b5;
					}
					label {
						text-align: center;
						display: inline-block;
						width: 5.9vw;
						background-color: #666666;
						color: white;
						font-size: 1vw;
						padding-top: 0.5vw;
						padding-bottom: 0.5vw;
					}
					label:hover {
						cursor: pointer;
					}
				}
			}
			.right {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				width: 15vw;
				i {
					color: white;
					font-size: 2vw;
				}
				i:last-child {
					font-size: 2.4vw;
				}
				i:hover {
					cursor: pointer;
				}
			}
		}
		p {
			display: none;
		}
	}
}

@media screen and (max-width: 767px) {
	.web {
		header {
			padding-right: 2.5vw;
			align-items: center;
			padding-left: 2vw;
			padding-top: 4vw;
			.headerLeft {
				i {
					font-size: 6vw;
				}
			}
			.headerCenter {
				a {
					transform: scale(2);
				}
			}
			.headerRight {
				i {
					font-size: 6vw;
					// transform: scale(2);
				}
			}
			.mask1 {			
				clip-path: circle(3.2vw at 5% 8.5vw);
				.box{
					.content{
						position: relative;
						.top{
							width: 50vw;
							display: flex;
							justify-content: space-between;
							
							a{
								i{
									font-size: 6vw;
								}
							}
						}
						.center{
							padding-top: 7vw;
							border-top: 1vw soli red;
							border-bottom: 1vw soli darkgray;
							
							height: 42vw;
							a{
								font-size: 7.2vw;
								
							}
						}
						.bottom{
							position: absolute;
							bottom: -45vw;
							width: 70vw;
							align-items: center;
							left: calc(50% - 35vw);
							.line{
								
							}
							a{
								font-size: 4.5vw;
							}
						}
					}
				}
			}
			.mask2 {
				clip-path: circle(3.2vw at calc(100% - 4.8vw) 8.5vw);
			}
		}

		footer {
			height: 11vw;

			position: relative;

			margin-top: -11vw;
			box-sizing: border-box;
			.content {
				display: flex;
				justify-content: space-between;
				width: 70vw;
				padding-left: 13vw;
				padding-top: 1.6vw;
				align-items: center;
				h2 {
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0vw;
					color: #ffffff;
					text-align: center;
				}
				i {
					font-size: 2vw;
					color: #ffffff;
				}
				i:hover {
					cursor: pointer;
				}
			}
			.content1 {
				width: 70vw;
				display: flex;
				justify-content: space-between;
				padding-left: 18vw;
				padding-top: 4vw;

				.left {
					display: none;
				}
				.right {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 55vw;
					margin: 0 auto;
					padding-top: 1.5vw;
					i {
						color: white;
						font-size: 5vw;
					}
					i:last-child {
						font-size: 7vw;
					}
					i:hover {
						cursor: pointer;
					}
				}
			}
			p {
				padding-top: 3vw;
				display: block;
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0vw;
				color: #ffffff;
				transform: scale(0.9);
			}
		}
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.web{
		header{
			.headerLeft{
				i{
					font-size: 6vw;
				}		
			}
			.mask1{
				clip-path: circle(3vw at 4.8% 5.13vw);
			}
			
			.headerRight{
				i{
					// display: none;
					font-size: 5.8vw;
				}		
			}
			.mask2{
				clip-path: circle(3.1vw at calc(100% - 4.9vw) 5.1vw);
			}
		}		
	}
}


